import Icon from '@/components/Icon'
import { useAppSelector } from '@/store'
import { changeArticleCollections, changeArticleLikings } from '@/store/action/article'
import { Toast } from 'antd-mobile'
import { useDispatch } from 'react-redux'
import styles from './index.module.scss'

type Props = {
  onShowComment?: () => void
  onComment?: () => void
  onShare?: () => void
}

export default function ArticleFooter({ onShowComment, onShare, onComment }: Props) {
  const { detail } = useAppSelector((state) => state.article)
  const dispatch = useDispatch()
  // 点赞按钮：点赞和取消点赞
  const handleLike = async () => {
    console.log('发送请求，同时实现点赞和取消点赞', detail.art_id)
    await dispatch(changeArticleLikings(detail.art_id))
    // 轻提示
    Toast.show({
      // Toast 文本内容
      content: detail.attitude === 1 ? '取消成功' : '点赞成功',
      // 🔔 是否允许背景点击，提示文字未消失不能点击页面内容
      maskClickable: false,
      // 提示持续时间
      duration: 1000,
    })
  }

  // 点击收藏按钮
  const handleCollect = async () => {
    // Toast.show({ content: '收藏业务实现请参考点赞功能', maskClickable: false, duration: 1000 })
    await dispatch(changeArticleCollections(detail.art_id))
    // 轻提示
    Toast.show({
      content: detail.is_collected ? '取消成功' : '收藏成功',
      duration: 1000,
    })
  }

  return (
    <div className={styles.root}>
      <div className='comment-footer'>
        <div className='input-btn' onClick={onComment}>
          <Icon type='iconbianji' />
          <span>去评论</span>
        </div>

        <>
          <div className='action-item' onClick={onShowComment}>
            <Icon type='iconbtn_comment' />
            <p>评论</p>
            <span className='bage'>{detail.comm_count || 0}</span>
          </div>
          {/* 'iconbtn_like2' */}
          <div className='action-item' onClick={handleLike}>
            <Icon type={detail?.attitude === 1 ? 'iconbtn_like_sel' : 'iconbtn_like2'} />
            <p>点赞</p>
          </div>
        </>
        <div className='action-item' onClick={handleCollect}>
          {/* 'iconbtn_collect' */}
          <Icon type={detail.is_collected ? 'iconbtn_collect_sel' : 'iconbtn_collect'} />
          <p>收藏</p>
        </div>
        <div className='action-item' onClick={onShare}>
          <Icon type='iconbtn_share' />
          <p>分享</p>
        </div>
      </div>
    </div>
  )
}
